<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html style="background-color: #3693d4">

<head>
    <!-- meta tags start -->

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta name="Keywords" content="perso, premium, mobile, template, HTML, CSS"/>

    <meta name="Description" content="Premium mobile HTML/CSS template."/>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

    <!-- meta tags end -->


    <!-- CSS files start -->

    <link href="/landlord/css/details_all.css" rel="stylesheet" type="text/css" media="screen"/>

    <!-- CSS files end -->


    <%--弹窗--%>


    <link href="https://cdn.staticfile.org/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.staticfile.org/animate.css/3.5.2/animate.min.css">

    <style>
        body {
            padding: 0;
            margin: 0;
        }

        .modal {
            display: none;
            background: rgba(0, 0, 0, .30);
            z-index: 999;
            padding: 30px 0;

            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;

            overflow-x: hidden;
            overflow-y: auto;
        }

        .modal .modal-dialog {
            position: relative;
            border-radius: 6px;
            background: #fff;
            margin: 0 auto;
        }

    </style>


</head>

<body style="overflow: auto">

<!-- website wrapper starts -->

<div class="websiteWrapper" style="padding-top: 30px;background-color: #2395c6">


    <!-- page wrapper starts -->

    <div class="pageWrapper singleProjectPageWrapper">

        <div class="singleProjectImageWrapper" id="slider">

            <div class='swipe' style="background-color: #e8e8e8">
                <ul id='slider3' style="margin-bottom: 0">

                    <c:forEach items="${room.images}" var="p">
                        <li style='display:block'>
                            <div>
                                    <%--展示图片--%>
                                <a href="/resource/preview/1/${p}.jpg" class="singleProjectExpandButton">
                                    <img src="/resource/preview/2/${p}.jpg"
                                         class="singleProjectImage">
                                </a>
                            </div>
                        </li>

                    </c:forEach>

                </ul>
            </div>
        </div>

    </div>

    <!-- page content wrapper starts -->

    <div class="pageContentWrapper singleProjectContentWrapper">

        <!-- page title starts -->

        <%--查看是否发布--%>
        <a id="publish-but-1"
           style="position: absolute;right: 30px;padding-right: 30px;z-index: 300;"></a>

        <h3 class="pageTitle">${room.name}
        </h3>


        <!-- page title ends -->

        <p>${room.description}</p>

        <p>${room.location.address},${room.location.detailedDescription}</p>

        <div class="pageBreak"></div>

        <h4 class="blockTitle">定价:</h4>

        <!-- table starts -->

        <table>

            <thead>

            <tr style="text-align: center">

                <th>编号</th>

                <th>定价</th>

                <th>押金</th>

            </tr>

            </thead>

            <tbody>

            <c:forEach items="${room.prices}" var="p">

                <tr>

                    <td>${p.serial}</td>

                    <td>${p.text}</td>

                    <c:if test="">
                    </c:if>


                    <c:choose>
                        <c:when test="${p.deposit==0}">
                            <td>无</td>
                        </c:when>
                        <c:otherwise>
                            <td>${p.deposit}元</td>
                        </c:otherwise>
                    </c:choose>
                </tr>

            </c:forEach>


            </tbody>

        </table>

        <!-- table ends -->

    </div>

    <!-- page content wrapper ends -->

    <div class="singleProjectItemButtonsWrapper" style="background-color: transparent;margin-bottom: 10%">


        <!--一个作为删除按钮一个作为编辑按钮-->
        <a href="" onclick="modal.open();return false" class="singleProjectDeleteButton">删除</a>

        <a href="" onclick="more.open();return false" class="singleProjectDetailsButton">管理</a>

    </div>

</div>

<!--确认删除按钮-->


<div id="modal" class="modal">
    <div class="modal-dialog animated" style="top: 20%">
        <div class="modal-content">
            <div class="modal-header">
                <strong>确认删除</strong>
            </div>

            <div class="modal-body">
                <div class="form-group">
                    <label class="control-label col-xs-4">您是否要删除该房源(无法撤销)</label>
                </div>
            </div>

            <div class="modal-footer">
                <button class="btn btn-primary" type="button" onclick="doDelete();"
                        style="background-color: red;border-color: red">删除
                </button>
                <button class="btn btn-default" type="button" onclick="modal.close();">取消</button>
            </div>
        </div>
    </div>
</div>


<style>

    .more-button {
        font-size: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: block;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 1rem;
        border-bottom: 1px solid #e9ecef;
        border-top-left-radius: .3rem;
        border-top-right-radius: .3rem;
        width: 100%;
        text-align: center;
    }

</style>

<div id="more" class="modal">
    <div class="modal-dialog animated" style="top: 20%">
        <div class="modal-content">
            <div id="publish-but-2" class="more-button" onclick=""></div>
            <div id="edit_bt" class="more-button" onclick="edit()">编辑</div>
            <div class="more-button" onclick="more.close()">关闭</div>
        </div>
    </div>
</div>

<script type="text/javascript">

    var swp;

    //如果只有一张图片就不重新规划容器大小
    if (!${!empty room.images && room.images.size()==1}) {
        swp = $('.swipe');
        let height = swp.width() * 0.618;
        swp.height(height);
    }

</script>

<%--弹窗--%>
<!-- JavaScript files start -->

<script type="text/javascript" src="https://cdn.staticfile.org/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script type="text/javascript" src="https://cdn.staticfile.org/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>

<script type="text/javascript" src="/landlord/js/custom.js"></script>

<!-- JavaScript files end -->

<!--图片滑动-->
<script type="text/javascript" src="https://cdn.staticfile.org/zepto/1.0rc1/zepto.min.js"></script>
<script type="text/javascript" src="/landlord/js/touchslider.js"></script>
<!--图片滑动-->

<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.js"></script>

<script type="text/javascript">

    function edit() {
        window.open("/landlord/edit?id=${room.id}", "_blank");
        more.close();
    }

    let publish1 = $('#publish-but-1');
    let publish2 = $('#publish-but-2');

    //初始化状态
    let isPublished = ${room.published};

    let isUsing ='${room.theUser}'!=='';

    if (isUsing) {

        publish1.text("使用中");
        publish1.css("color", "red");

        publish2.remove();
        $('#edit_bt').remove();
        $('.singleProjectDeleteButton').remove();
        $('.singleProjectDetailsButton').remove();

    } else {
        publishState(isPublished);

        publish1.click(function () {
            postPublish();
        });

    }

    publish1.show();



    publish2.click(function () {

        more.close();
        setTimeout(function () {
            postPublish();
        }, 500);
    });

    function postPublish() {



            //发起post请求发布或撤销发布房源
            $.post("/room/publish", {roomId: '${room.id}', publishState: !isPublished}, function (data) {
                isPublished = data;
                //切换房源状态
                publishState(isPublished);
            }).error(function (err) {

                console.log(err);


                alert("请求失败");
            });

    }


    function publishState(state) {
        if (state) {
            $.cookie('roomState', '${room.id}' + '-published');
            publish1.text("已发布");
            publish1.css("color", "green");
            publish2.text('撤销发布');
        } else {

            $.cookie('roomState', '${room.id}' + '-unpublished');
            publish1.text("未发布");
            publish1.css("color", "gray");
            publish2.text('发布');

        }
    }

</script>


<script type="text/javascript" src="/landlord/js/rmodal.js"></script>


<script type="text/javascript">
    var more = new RModal(document.getElementById('more'));
</script>


<script type="text/javascript">
    top.top.setTitle("详情");
</script>

<script type="text/javascript">

    if (('${room.images}' === '') || ${room.images.size()==0}) {

        swp.css("background-image", "url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546502159888&di=ba8195972eb78359422bb19a4e6b59d1&imgtype=0&src=http%3A%2F%2Fp2.so.qhimgs1.com%2Ft01481b7750ea1d245e.png)");
        swp.css("background-size", "cover");
        swp.css("-moz-background-size", "cover");
    }


</script>


<script type="text/javascript">
    new TouchSlider({id: 'slider', speed: 600});

    //添加事件
    var modal = new RModal(document.getElementById('modal'));

    function doDelete() {
        modal.close();
        $.post('/landlord/myRooms/remove', {id: '${room.id}'}, function () {
            //将被删除的id写入cookie
            $.cookie('deleteRoomId', '${room.id}');
            //关闭当前窗口
            closeThis();
        }).error(function (xhr) {
            alert(xhr.responseText);
        });
    }

    pageCallbacks.onBack = function () {
        closeThis();
        return false;
    }

</script>


</body>

</html>

